import React from 'react'
import Navigator from '../../component/navigator/navigator'
import './article_info.css'

/**
 * 文章内容详情
 */
class ArticleInfo extends React.Component {

    state={
        //文章信息
        article:{
            id:12,
            title:'是不是想要我做梦笑醒啊！赐给我这么漂亮可爱的萌娃！',
            content:'<p>简书」因违反《网络安全法》《互联网信息服务管理办法》《互联网新闻信息服务管理规定》等相关法律法规，严重危害互联网信息传播秩序，根据网信主管部门要求，从2019年4月13日0时至4月19日0时，暂停更新PC端上的内容，并对所有平台上的内容进行全面彻底的整改。</p>',
            created:'2018.12.18 00:14*',
            gold:48.2,
            word_cnt:2219,
            read_cnt:6727,
            comment_cnt:116,
            love_cnt:180
        },
        //作者信息
        author:{
            user_id:1,   //用户id
            img:'https://upload.jianshu.io/users/upload_avatars/16534955/971d9fd8-fcd3-41a8-a220-6e6ad4b1f1e6.png?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120', //作者头像
            nick_name:'唐三',   //昵称
            attention:true, //是否已关注
        }
    }

    componentDidMount() {
        const article_id = this.props.match.params.article_id
        if (!article_id) {
            this.props.history.push('/404')
            return
        }
        console.log("article_id:",article_id)
    }
    
    render() {
        const {article,author} = this.state
        return (
            <div className="article_info">

                <div className="content">
                    <div className="article">
                        <h1>{article.title}</h1>

                        <div>
                            <a className="avatar" href="#">
                                <img src={author.img} />
                            </a>
                            <div className="info">
                                <span className="name">
                                    <a href="#">{author.nick_name}</a>
                                </span>
                                <a className="follow">
                                    <i className="iconfont ic-followed"></i>
                                    <span>已关注</span>
                                </a>
                                <div className="meta">
                                    <span>
                                        <i className="iconfont icon-diamond"/>{article.gold}
                                    </span>
                                    <span>{article.created}</span>
                                    <span>字数 {article.word_cnt}</span>
                                    <span>阅读 {article.read_cnt}</span>
                                    <span>评论 {article.comment_cnt}</span>
                                    <span>喜欢 {article.love_cnt}</span>
                                </div>
                            </div>
                        </div>

                        <div className="content" dangerouslySetInnerHTML = {{ __html: article.content }} />
                    </div>
                </div>
            </div>
        )
    }
}

export default ArticleInfo